@import './variables.scss';
@import './mixins.scss';

// 重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif;
  font-size: $font-size-base;
  line-height: 1.5;
  color: var(--text-color-primary);
  background-color: var(--background-color-base);
}

// 链接样式
a {
  color: var(--primary-color);
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: lighten($primary-color, 10%);
  }
}

// 图片样式
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

// 通用工具类
.clearfix {
  @include clearfix;
}

.text-ellipsis {
  @include text-ellipsis;
}

.flex-center {
  @include flex(row, center, center);
}

.flex-between {
  @include flex(row, space-between, center);
}

.flex-around {
  @include flex(row, space-around, center);
}

.flex-column {
  @include flex(column, center, center);
}

// 间距类
@each $key, $value in (
  'mini': $spacing-mini,
  'small': $spacing-small,
  'base': $spacing-base,
  'large': $spacing-large,
  'extra-large': $spacing-extra-large
) {
  .m-#{$key} { margin: $value; }
  .mt-#{$key} { margin-top: $value; }
  .mr-#{$key} { margin-right: $value; }
  .mb-#{$key} { margin-bottom: $value; }
  .ml-#{$key} { margin-left: $value; }
  .mx-#{$key} { margin-left: $value; margin-right: $value; }
  .my-#{$key} { margin-top: $value; margin-bottom: $value; }

  .p-#{$key} { padding: $value; }
  .pt-#{$key} { padding-top: $value; }
  .pr-#{$key} { padding-right: $value; }
  .pb-#{$key} { padding-bottom: $value; }
  .pl-#{$key} { padding-left: $value; }
  .px-#{$key} { padding-left: $value; padding-right: $value; }
  .py-#{$key} { padding-top: $value; padding-bottom: $value; }
}

// 文字颜色类
.text-primary { color: var(--primary-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }
.text-info { color: var(--info-color); }

// 文字大小类
.text-xs { font-size: $font-size-extra-small; }
.text-sm { font-size: $font-size-small; }
.text-base { font-size: $font-size-base; }
.text-md { font-size: $font-size-medium; }
.text-lg { font-size: $font-size-large; }
.text-xl { font-size: $font-size-extra-large; }

// 文字对齐类
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

// 显示类
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

// 定位类
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

// 圆角类
.rounded-sm { border-radius: $border-radius-small; }
.rounded { border-radius: $border-radius-base; }
.rounded-lg { border-radius: $border-radius-large; }
.rounded-full { border-radius: $border-radius-circle; }

// 阴影类
.shadow-base { @include box-shadow('base'); }
.shadow-light { @include box-shadow('light'); }
.shadow-dark { @include box-shadow('dark'); }

// 滚动条样式
.custom-scrollbar {
  @include scrollbar;
}

// 页面过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 卡片类
.card {
  @include card-base;
}

// 1px边框类
.border-1px { @include border-1px; }
.border-1px-t { @include border-1px($direction: top); }
.border-1px-r { @include border-1px($direction: right); }
.border-1px-b { @include border-1px($direction: bottom); }
.border-1px-l { @include border-1px($direction: left); }